<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 运动商城</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <jsp:include page="../common/header.jsp"/>
    
    <!-- 个人中心内容 -->
    <div class="container py-5">
        <div class="row">
            <!-- 左侧导航 -->
            <div class="col-md-3">
                <div class="list-group">
                    <a href="#profile" class="list-group-item list-group-item-action active" data-bs-toggle="list">
                        <i class="fas fa-user me-2"></i>个人信息
                    </a>
                    <a href="#password" class="list-group-item list-group-item-action" data-bs-toggle="list">
                        <i class="fas fa-lock me-2"></i>修改密码
                    </a>
                    <a href="#address" class="list-group-item list-group-item-action" data-bs-toggle="list">
                        <i class="fas fa-map-marker-alt me-2"></i>收货地址
                    </a>
                </div>
            </div>
            
            <!-- 右侧内容 -->
            <div class="col-md-9">
                <div class="tab-content">
                    <!-- 个人信息 -->
                    <div class="tab-pane fade show active" id="profile">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">个人信息</h5>
                            </div>
                            <div class="card-body">
                                <form id="profileForm">
                                    <div class="row mb-3">
                                        <label class="col-sm-3 col-form-label">用户名</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" value="${user.username}" readonly>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-3 col-form-label">真实姓名</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" name="realName" value="${user.realName}">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-3 col-form-label">邮箱</label>
                                        <div class="col-sm-9">
                                            <input type="email" class="form-control" name="email" value="${user.email}">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-3 col-form-label">手机号</label>
                                        <div class="col-sm-9">
                                            <input type="tel" class="form-control" name="phone" value="${user.phone}">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-3 col-form-label">性别</label>
                                        <div class="col-sm-9">
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="gender1" name="gender" class="form-check-input" value="1" ${user.gender == 1 ? 'checked' : ''}>
                                                <label class="form-check-label" for="gender1">男</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="gender2" name="gender" class="form-check-input" value="2" ${user.gender == 2 ? 'checked' : ''}>
                                                <label class="form-check-label" for="gender2">女</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input type="radio" id="gender0" name="gender" class="form-check-input" value="0" ${user.gender == 0 ? 'checked' : ''}>
                                                <label class="form-check-label" for="gender0">保密</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-sm-9 offset-sm-3">
                                            <button type="submit" class="btn btn-primary">保存修改</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 修改密码 -->
                    <div class="tab-pane fade" id="password">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">修改密码</h5>
                            </div>
                            <div class="card-body">
                                <form id="passwordForm">
                                    <div class="row mb-3">
                                        <label class="col-sm-3 col-form-label">原密码</label>
                                        <div class="col-sm-9">
                                            <input type="password" class="form-control" name="oldPassword" required>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-3 col-form-label">新密码</label>
                                        <div class="col-sm-9">
                                            <input type="password" class="form-control" name="newPassword" required>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-3 col-form-label">确认新密码</label>
                                        <div class="col-sm-9">
                                            <input type="password" class="form-control" name="confirmPassword" required>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-sm-9 offset-sm-3">
                                            <button type="submit" class="btn btn-primary">修改密码</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 收货地址 -->
                    <div class="tab-pane fade" id="address">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">收货地址</h5>
                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addressModal">
                                    <i class="fas fa-plus me-1"></i>新增地址
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="address-list">
                                    <c:forEach items="${shippingAddresses}" var="address">
                                        <div class="address-item mb-3 p-3 border rounded">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <div>
                                                    <h6 class="mb-1">
                                                        ${address.receiverName}
                                                        <span class="ms-2">${address.receiverPhone}</span>
                                                        <c:if test="${address.defaultStatus == 1}">
                                                            <span class="badge bg-primary ms-2">默认</span>
                                                        </c:if>
                                                    </h6>
                                                    <p class="mb-0 text-muted">
                                                        ${address.receiverProvince} ${address.receiverCity} 
                                                        ${address.receiverDistrict} ${address.receiverAddress}
                                                    </p>
                                                </div>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-outline-primary btn-sm edit-address" 
                                                            data-id="${address.id}"
                                                            data-name="${address.receiverName}"
                                                            data-phone="${address.receiverPhone}"
                                                            data-province="${address.receiverProvince}"
                                                            data-city="${address.receiverCity}"
                                                            data-district="${address.receiverDistrict}"
                                                            data-address="${address.receiverAddress}"
                                                            data-default="${address.defaultStatus}">
                                                        编辑
                                                    </button>
                                                    <c:if test="${address.defaultStatus != 1}">
                                                        <button type="button" class="btn btn-outline-success btn-sm set-default"
                                                                data-id="${address.id}">
                                                            设为默认
                                                        </button>
                                                    </c:if>
                                                    <button type="button" class="btn btn-outline-danger btn-sm delete-address"
                                                            data-id="${address.id}">
                                                        删除
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 新增/编辑地址模态框 -->
    <div class="modal fade" id="addressModal" tabindex="-1" aria-labelledby="addressModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addressModalLabel">新增收货地址</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addressForm">
                        <input type="hidden" name="id">
                        <input type="hidden" name="defaultStatus">
                        <div class="mb-3">
                            <label class="form-label">收货人</label>
                            <input type="text" class="form-control" name="receiverName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">手机号码</label>
                            <input type="tel" class="form-control" name="receiverPhone" required>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label">省份</label>
                                <input type="text" class="form-control" name="receiverProvince" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">城市</label>
                                <input type="text" class="form-control" name="receiverCity" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">区/县</label>
                                <input type="text" class="form-control" name="receiverDistrict" required>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">详细地址</label>
                            <input type="text" class="form-control" name="receiverAddress" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveAddress">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <jsp:include page="../common/footer.jsp"/>
    
    <script>
    $(document).ready(function() {
        // 表单提交事件
        $('#profileForm').on('submit', function(e) {
            e.preventDefault();
            
            var formData = {
                realName: $('input[name="realName"]').val(),
                email: $('input[name="email"]').val(),
                phone: $('input[name="phone"]').val(),
                gender: $('input[name="gender"]:checked').val()
            };
            
            $.ajax({
                url: '${pageContext.request.contextPath}/user/update',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(response) {
                    if (response.success) {
                        alert('个人信息更新成功');
                    } else {
                        alert(response.message || '更新失败，请重试');
                    }
                },
                error: function() {
                    alert('服务器错误，请稍后重试');
                }
            });
        });
        
        // 密码表单提交事件
        $('#passwordForm').on('submit', function(e) {
            e.preventDefault();
            
            var oldPassword = $('input[name="oldPassword"]').val();
            var newPassword = $('input[name="newPassword"]').val();
            var confirmPassword = $('input[name="confirmPassword"]').val();
            
            if (newPassword !== confirmPassword) {
                alert('两次输入的新密码不一致');
                return;
            }
            
            $.ajax({
                url: '${pageContext.request.contextPath}/user/password',
                type: 'POST',
                data: {
                    oldPassword: oldPassword,
                    newPassword: newPassword
                },
                success: function(response) {
                    if (response.success) {
                        alert('密码修改成功，请重新登录');
                        window.location.href = '${pageContext.request.contextPath}/login';
                    } else {
                        alert(response.message || '修改失败，请重试');
                    }
                },
                error: function() {
                    alert('服务器错误，请稍后重试');
                }
            });
        });
        
        // 编辑地址
        $('.edit-address').on('click', function() {
            var id = $(this).data('id');
            var name = $(this).data('name');
            var phone = $(this).data('phone');
            var province = $(this).data('province');
            var city = $(this).data('city');
            var district = $(this).data('district');
            var address = $(this).data('address');
            var isDefault = $(this).data('default');
            
            $('#addressModalLabel').text('编辑收货地址');
            $('input[name="id"]').val(id);
            $('input[name="receiverName"]').val(name);
            $('input[name="receiverPhone"]').val(phone);
            $('input[name="receiverProvince"]').val(province);
            $('input[name="receiverCity"]').val(city);
            $('input[name="receiverDistrict"]').val(district);
            $('input[name="receiverAddress"]').val(address);
            $('input[name="defaultStatus"]').val(isDefault);
            
            var addressModal = new bootstrap.Modal(document.getElementById('addressModal'));
            addressModal.show();
        });
        
        // 新增地址
        $('button[data-bs-target="#addressModal"]').on('click', function() {
            $('#addressModalLabel').text('新增收货地址');
            $('#addressForm')[0].reset();
            $('input[name="id"]').val('');
            $('input[name="defaultStatus"]').val('1');  // 新增地址时默认为默认地址
        });
        
        // 保存地址
        $('#saveAddress').on('click', function() {
            var formData = {
                id: $('input[name="id"]').val(),
                receiverName: $('input[name="receiverName"]').val(),
                receiverPhone: $('input[name="receiverPhone"]').val(),
                receiverProvince: $('input[name="receiverProvince"]').val(),
                receiverCity: $('input[name="receiverCity"]').val(),
                receiverDistrict: $('input[name="receiverDistrict"]').val(),
                receiverAddress: $('input[name="receiverAddress"]').val(),
                defaultStatus: $('input[name="defaultStatus"]').val()  // 使用表单中的值
            };
            
            var url = formData.id ? 
                '${pageContext.request.contextPath}/shipping/update' : 
                '${pageContext.request.contextPath}/shipping/add';
            
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(response) {
                    if (response.status === 1) {
                        alert('地址保存成功');
                        window.location.reload();
                    } else {
                        alert(response.msg || '操作失败');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('保存地址失败:', error);
                    console.error('请求数据:', formData);
                    alert('服务器错误，请稍后重试');
                }
            });
        });
        
        // 设为默认地址
        $('.set-default').on('click', function() {
            var id = $(this).data('id');
            
            $.ajax({
                url: '${pageContext.request.contextPath}/shipping/set-default',
                type: 'POST',
                data: {
                    id: id
                },
                success: function(response) {
                    if (response.success) {
                        alert('已设为默认地址');
                        window.location.reload();
                    } else {
                        alert(response.message || '操作失败');
                    }
                },
                error: function() {
                    alert('服务器错误，请稍后重试');
                }
            });
        });
        
        // 删除地址
        $('.delete-address').on('click', function() {
            if (confirm('确定要删除这个地址吗？')) {
                var id = $(this).data('id');
                
                $.ajax({
                    url: '${pageContext.request.contextPath}/shipping/delete',
                    type: 'POST',
                    data: {
                        id: id
                    },
                    success: function(response) {
                        if (response.success) {
                            alert('地址已删除');
                            window.location.reload();
                        } else {
                            alert(response.message || '操作失败');
                        }
                    },
                    error: function() {
                        alert('服务器错误，请稍后重试');
                    }
                });
            }
        });
    });
    </script>
</body>
</html> 